<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Test01</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>

<div id="app">
    <p v-once>{{ message }}</p>
    <p>{{ dhtml }}</p>
    <div v-html="dhtml"></div>
    <div v-bind:style="dstyle">Green Template</div>
    <p>{{ message + ' abc' }}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <div v-bind:style="'color:' + dcolor">Green Template</div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            dhtml: '<span style="color: red">HTML Template</span>',
            dstyle: 'color: green',
            dcolor: 'red',
            ok: true
        }
    });

    vm.message = "Hello Vue!!!";
    vm.dstyle = "color: yellow";
    vm.ok = false;

</script>

</body>
</html>